<template>
    <div>
        <header class="header">
            <i class=" iconfont icon-iconfontjiantouzuo"></i>
            <h2 class="ellipsis">购物车</h2>
            <i class="iconfont icon-sandian-copy"></i>
        </header>
        <div class="dl">
            <p>
                登录后同步电脑和手机购物车中的商品
            </p>
            <button>去登录</button>
        </div>
        <div class="guang">
            <div class="img">
                <img src="//app.gomein.net.cn/plus/images/shop_cart/bj_baobei.png?v=2017092001" alt="">
            </div>

            <ul>
                <li>购物车空空~买点啥</li>
                <li>
                    <p>先逛逛</p>
                </li>
            </ul>
        </div>

        <div class="chanpin">
            <h3>大家都在买</h3>
            <swiper :options="swiperOption2" ref="mySwiper" class="sw2">
                <swiper-slide class="swp2" v-for="(v,i) in list1" :key="i">
                    <ul>
                        <li><img :src="v.img"></li>
                        <li>{{v.qian}}</li>
                        <li>{{v.s}}</li>
                    </ul>
                </swiper-slide>
            </swiper>

        </div>

    </div>

</template>
<script>
export default {
  data() {
    return {
      list1: [
        {
          img: "//gfs17.gomein.net.cn/T1V2JvBbYv1RCvBVdK_160.jpg",
          qian: "￥67.7",
          s: "仅剩.49件"
        },
        {
          img: "//gfs17.gomein.net.cn/T1V2JvBbYv1RCvBVdK_160.jpg",
          qian: "￥67.7",
          s: "仅剩.49件"
        },
        {
          img: "//gfs17.gomein.net.cn/T1V2JvBbYv1RCvBVdK_160.jpg",
          qian: "￥67.7",
          s: "仅剩.49件"
        },
        {
          img: "//gfs17.gomein.net.cn/T1V2JvBbYv1RCvBVdK_160.jpg",
          qian: "￥67.7",
          s: "仅剩.49件"
        },
        {
          img: "//gfs17.gomein.net.cn/T1V2JvBbYv1RCvBVdK_160.jpg",
          qian: "￥67.7",
          s: "仅剩.49件"
        },
        {
          img: "//gfs17.gomein.net.cn/T1V2JvBbYv1RCvBVdK_160.jpg",
          qian: "￥67.7",
          s: "仅剩.49件"
        },
        {
          img: "//gfs17.gomein.net.cn/T1V2JvBbYv1RCvBVdK_160.jpg",
          qian: "￥67.7",
          s: "仅剩.49件"
        },
        {
          img: "//gfs17.gomein.net.cn/T1V2JvBbYv1RCvBVdK_160.jpg",
          qian: "￥67.7",
          s: "仅剩.49件"
        },
        {
          img: "//gfs17.gomein.net.cn/T1V2JvBbYv1RCvBVdK_160.jpg",
          qian: "￥67.7",
          s: "仅剩.49件"
        },
        {
          img: "//gfs17.gomein.net.cn/T1V2JvBbYv1RCvBVdK_160.jpg",
          qian: "￥67.7",
          s: "仅剩.49件"
        },
        {
          img: "//gfs17.gomein.net.cn/T1V2JvBbYv1RCvBVdK_160.jpg",
          qian: "￥67.7",
          s: "仅剩.49件"
        },
        {
          img: "//gfs17.gomein.net.cn/T1V2JvBbYv1RCvBVdK_160.jpg",
          qian: "￥67.7",
          s: "仅剩.49件"
        }
      ],
      swiperOption2: {
        slidesPerView: 6,
        spaceBetween: 30,
        freeMode: true,
        pagination: {
          el: ".swiper-pagination",
          clickable: true
        }
      }
    };
  }
};
</script>
<style lang="less" scoped>
.px2rem(@name, @px) {
  @{name}: @px / 75 * 1rem;
}
.header {
  .px2rem(height,100);
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  border-bottom: 1px solid #ccc;
  i {
    width: 20%;
    .px2rem(font-size,40);
  }
  .ellipsis {
    width: 60%;
  }
}
.dl {
  .px2rem(height,80);
  display: flex;
  align-items: center;
  .px2rem(font-size,32);
  justify-content: space-between;
  background: #fff;
  border-bottom: 1px solid #ccc;
  p {
    padding-left: 5%;
  }
  button {
    margin-right: 5%;
    outline: none;
    border: none;
    border-radius: 50px;
  }
}
.guang {
  width: 100%;
  display: flex;
  flex-direction: column;
  background: #ccc;
  .img {
    width: 60%;
    margin: 20px auto;
    img {
      width: 100%;
    }
  }
  ul {
    width: 60%;
    margin: 0 auto;
    text-align: center;
    .px2rem(font-size,34);
    li:nth-child(2) {
      width: 100%;
      p {
        .px2rem(height,80);
        .px2rem(width,200);
        background: red;
        .px2rem(line-height,80);
        margin: 20px auto;
        border-radius: 50px;
      }
    }
  }
}

.chanpin {
    h3{
        .px2rem(height,100);
        .px2rem(line-height,100);
        padding-left: 5%;
    }
  width: 100%;
  margin-bottom: 100px;
  .sw2 {
    .swp2 {
      ul {
        width: 100%;
        li {
          text-align: center;

          img {
            width: 80%;
          }
        }
        li:nth-child(2) {
          .px2rem(font-size,28);
        }
        li:nth-child(3) {
          .px2rem(font-size,24);
        }
      }
    }
  }
}
</style>
